<template>
	<view>
		<view class="single-graph">
			<swiper v-if="value.selectedTemplate == 'carousel-posters'" class="swiper" autoplay="true" :indicator-dots="isDots"
			 indicator-active-color="#ffffff" :style="{ height: value.height > 0 ? value.height * 2 + 'rpx' : '200rpx' }">
				<swiper-item class="swiper-item" v-for="(item, index) in value.list" :key="index" v-if="item.imageUrl" @click="redirectTo(item)">
					<view class="item">
						<image :src="$util.img(item.imageUrl)" mode="widthFix"></image>
						<text v-if="item.title">{{ item.title }}</text>
					</view>
				</swiper-item>
			</swiper>

			<!-- 垂直排列 -->
			<view v-else-if="value.selectedTemplate == 'vertically'">
				<view class="item" v-for="(item, index) in value.list" :key="index" :style="{ marginBottom: index + 1 != value.list.length ? value.imageClearance * 2 + 'rpx' : '0', padding: '0 ' + value.padding * 2 + 'rpx' }"
				 @click="redirectTo(item.link)">
					<image :src="$util.img(item.imageUrl)" mode="widthFix"></image>
					<text v-if="item.title">{{ item.title }}</text>
				</view>
			</view>

			<!-- 横向滑动 -->
			<scroll-view scroll-x="true" v-else-if="value.selectedTemplate == 'horizontal-sliding'" class="horizontal-sliding">
				<view class="item active" v-for="(item, index) in value.list" :key="index" :style="{ marginRight: value.imageClearance * 2 + 'rpx' }"
				 @click="redirectTo(item.link)">
					<image :src="$util.img(item.imageUrl)" mode="widthFix"></image>
					<text v-if="item.title">{{ item.title }}</text>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'diy-img-ads',
		props: {
			value: {
				type: Object
			}
		},
		data() {
			return {};
		},
		computed: {
			isDots() {
				this.value.list.forEach(item => {
					return item.title ? 'false' : 'true'
				})
			}
		},
		methods: {
			redirectTo(e) {
				// uni.navigateTo({
				// 	url:"../../otherpages/ad_detail/ad_detail"
				// })
				if(e.goods_id=="0"){
					if(e.type==1){
						this.$util.redirectTo('/otherpages/ad_detail/ad_detail')
					}else{
						this.$util.redirectTo('/otherpages/recharge/list/list')
					}
					
				}else{
					this.$util.redirectTo('/pages/goods/detail/detail', { sku_id: e.goods_id });
					// uni.navigateTo({
					// 	url:"../../pages/goods/detail/detail?sku_id="+e.goods_id
					// })
					// this.$util.diyRedirectTo(link);
				}
				
			}
		}
	};
</script>

<style lang="scss" scoped>
	.single-graph {
		width: 100%;
		line-height: 0;
		display: flex;
		justify-content: center;
		flex-direction: column;
		// background-color: #fff;
		align-items: center;

	}

	.single-graph text {
		background: rgba(0, 0, 0, 0.3);
		position: absolute;
		bottom: 10rpx;
		color: #ffffff;
		font-size: $ns-font-size-base;
		width: 100%;
		left: 0;
		line-height: 40rpx;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		padding: 0 10rpx;
	}

	.item.active text {
		background: rgba(0, 0, 0, 0.3);
		position: absolute;
		bottom: 40rpx;
		color: #ffffff;
		font-size: $ns-font-size-base;
		width: 100%;
		left: 0;
		line-height: 40rpx;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		padding: 0 10rpx;
	}

	.swiper {
		width: 702rpx;
		height: 348rpx;
		margin: 0 auto;
		border-radius: 10rpx;
		overflow: hidden;
		// background-color: #fff;
	}

	.swiper-item {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		flex-direction: column;

		.item {
			width: 100%;
			height: 100%;
			text-align: center;
			position: relative;

			image {
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
			}
		}
	}

	.horizontal-sliding {
		overflow-x: scroll;
		white-space: nowrap;
	}

	.horizontal-sliding::-webkit-scrollbar {
		display: none;
	}

	.horizontal-sliding .item {
		display: inline-block;
		width: 100%;
		vertical-align: middle;
	}
</style>
